<template>
  <view class="rule-item">
    <view class="rule-header">
      <view class="title-wrap">
        <text>{{ title }}</text>
      </view>
      <view class="action-wrap">
        <TButton @click.native="onClose">关闭</TButton>
      </view>
    </view>
    <view class="rule-body">
      <view v-for="(item,index) in config" :key="index" class="config-item">
        <view class="amount-wrap">
          <view class="label">转入</view>
          <view class="value">
            <input
              v-model.number="item.amount"
              type="number"
              placeholder="请输入金额"
              placeholder-class="placeholder"
              @blur="handleBlurPrice(item,'amount')"
            />
          </view>
        </view>
        <view class="amount-wrap">
          <view class="label">送</view>
          <view class="value">
            <input
              v-model.number="item.giveAmount"
              type="number"
              placeholder="请输入金额"
              placeholder-class="placeholder"
              @blur="handleBlurPrice(item,'giveAmount')"
            />
          </view>
          <view class="delete-icon">
            <uni-icons v-if="config.length>1" type="minus-filled" size="20" color="#dd524d" @click="deleteConfig(index)"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-wrap">
      <TButton @click.native="addNew">+添加</TButton>
    </view>
  </view>
</template>

<script>
import { promotionTypes } from "../../../config/status";
import TButton from "../../../components/public/Button/TButton.vue";
export default {
  components: { TButton },
  props: {
    data: {
      type: Object,
      default() {
        return {
          // "createdAt": "2020-06-12 15:18:01",
          // "updatedAt": "2020-06-12 15:18:01",
          // "id": 6,
          // "shopId": 2,
          // "type": 1,
          // "config": [{ "amount": 200, "giveAmount": 20 }, { "amount": 300, "giveAmount": 30 }],
          // "status": 1
        };
      }
    }
  },
  data() {
    return {
      config: this.data.config || [],
      type: 1
    };
  },
  computed: {
    title() {
      let rule = promotionTypes.find(v => v.type == this.data.type);
      return (rule && rule.label) || "";
    }
  },
  watch: {
    data(val) {
      this.config = this.$deepStr(val.config);
    }
  },
  methods: {
    handleBlurPrice(item, key) {
      if (item[key] || item[key] === 0) {
        item[key] = parseFloat(item[key].toFixed(2));
      }
    },
    addNew() {
      this.config.push({ amount: null, giveAmount: null });
    },
    deleteConfig(index) {
      this.config.splice(index, 1);
    },
    onClose() {
      uni.showModal({
        content: `确定关闭该活动？`,
        // showCancel: false,
        confirmText: "确定",
        success: res => {
          if (res.confirm) {
            this.$emit("close", this.data);
          }
        }
      });
    },
    getData() {
      let valid = true;
      let message = "";
      this.config.forEach(v => {
        if (!v.amount) {
          valid = false;
        }
        if (!v.giveAmount) {
          valid = false;
        }
      });
      if (this.config.length == 0) {
        valid = false;
      }
      if (!valid) {
        uni.showToast({
          title: "请将规则填写完整",
          icon: "none"
        });
      }
      let form = {
        config: this.config,
        type: this.data.type
      };
      return valid ? form : null;
    }
  }
};
</script>

<style scoped lang="scss">
.rule-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  .rule-header {
    display: flex;
    justify-content: space-between;
    padding: 0 0 30rpx 0;
    .title-wrap {
      font-size: 34rpx;
      font-weight: 600;
    }
  }
  .rule-body {
    .config-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      margin-bottom: 15rpx;
      // line-height: 80rpx;
      .amount-wrap {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        .placeholder {
          font-size: 28rpx;
        }
        .label {
        }
        .value {
          background-color: #efefef;
          display: flex;
          margin-left: 20rpx;
          width: 50%;
          height: 100%;
          padding: 0 20rpx;
          align-items: center;
        }
        .delete-icon {
          // float: right;
          margin-left: 10rpx;
        }
      }
    }
  }
  .btn-wrap {
    text-align: center;
    color: $themeColor;
  }
}
</style>
